<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Breadcrumb 面包屑</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-breadcrumb>
		<a-breadcrumb-item>Home</a-breadcrumb-item>
		<a-breadcrumb-item><a href="https://www.baidu.com/">Application Center</a></a-breadcrumb-item>
		<a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
		<a-breadcrumb-item>An Application</a-breadcrumb-item>
	</a-breadcrumb>
	
	
	<a-divider class="a-divi" orientation="left">其它路由</a-divider><!-- =============================================================== -->
	<p class="desc">和 vue-router 进行结合使用。</p>
	<div>
		<a-breadcrumb :routes="routes">
			<template #itemRender="{ route, paths }">
				<span v-if="routes.indexOf(route) === routes.length - 1">
					{{ route.breadcrumbName }}
				</span>
				<router-link v-else :to="`${basePath}/${paths.join('/')}`">
					{{ route.breadcrumbName }}
				</router-link>
			</template>
		</a-breadcrumb>
		<br />
		{{ basePath }}
	</div>
	
	
	<a-divider class="a-divi" orientation="left">分隔符</a-divider><!-- =============================================================== -->
	<p class="desc">使用 Breadcrumb.Separator 可以自定义分隔符。</p>
	<a-breadcrumb separator="">
		<a-breadcrumb-item>Location</a-breadcrumb-item> <a-breadcrumb-separator>:</a-breadcrumb-separator>
		<a-breadcrumb-item href="">Application Center</a-breadcrumb-item> <a-breadcrumb-separator></a-breadcrumb-separator>
		<a-breadcrumb-item href="">Application List</a-breadcrumb-item> <a-breadcrumb-separator></a-breadcrumb-separator>
		<a-breadcrumb-item>An Application</a-breadcrumb-item>
	</a-breadcrumb>
	
	
	
	<a-divider class="a-divi" orientation="left">带下拉菜单的面包屑</a-divider><!-- =============================================================== -->
	<p class="desc">面包屑支持下拉菜单。</p>
	<a-breadcrumb>
		<a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item>
		<a-breadcrumb-item><a href="http://www.jd.com/">Component</a></a-breadcrumb-item>
		<a-breadcrumb-item>
			<a href="">General</a>
			<template #overlay>
				<a-menu>
					<a-menu-item>
						<a target="_blank" rel="noopener noreferrer" href="http://www.jd.com/">General</a>
					</a-menu-item>
					<a-menu-item>
						<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">Layout</a>
					</a-menu-item>
					<a-menu-item>
						<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">Navigation</a>
					</a-menu-item>
				</a-menu>
			</template>
		</a-breadcrumb-item>
		<a-breadcrumb-item>Button</a-breadcrumb-item>
	</a-breadcrumb>
	
	
	<a-divider class="a-divi" orientation="left">分隔符</a-divider><!-- =============================================================== -->
	<p class="desc">用separator=">"可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符</p>
	<a-breadcrumb separator=">">
		<a-breadcrumb-item>Home</a-breadcrumb-item>
		<a-breadcrumb-item href="http://www.jd.com/">Application Center</a-breadcrumb-item>
		<a-breadcrumb-item href="http://www.taobao.com/">Application List</a-breadcrumb-item>
		<a-breadcrumb-item>An Application</a-breadcrumb-item>
	</a-breadcrumb>
	<a-breadcrumb>
		<template #separator><span style="color: red">></span></template>
		<a-breadcrumb-item>Home</a-breadcrumb-item>
		<a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
		<a-breadcrumb-item href="">Application List</a-breadcrumb-item>
		<a-breadcrumb-item>An Application</a-breadcrumb-item>
	</a-breadcrumb>
	
	
	<a-divider class="a-divi" orientation="left">带有图标的</a-divider><!-- =============================================================== -->
	<p class="desc">图标放在文字前面。</p>
	<a-breadcrumb>
		<a-breadcrumb-item href="">
			<share class="aut-icon"></share>
		</a-breadcrumb-item>
		<a-breadcrumb-item href="">
			<user class="aut-icon"></user> 
			<span>Application List</span>
		</a-breadcrumb-item>
		<a-breadcrumb-item>Application</a-breadcrumb-item>
	</a-breadcrumb>
	
	
	<a-divider class="a-divi" orientation="left">API#</a-divider><!-- =============================================================== -->
API#
#
参数	说明	类型	可选值	默认值
itemRender	自定义链接函数，和 vue-router 配置使用， 也可使用 #itemRender="props"	({route, params, routes, paths}) => vNode		-
params	路由的参数	object		-
routes	router 的路由栈信息	routes[]		-
separator	分隔符自定义	string|slot		'/'

Breadcrumb.Item #
参数	参数	类型	默认值	版本
href	链接的目的地	string	-	1.5.0
overlay	下拉菜单的内容	Menu | () => Menu	-	1.5.0

事件 #
事件名称	说明	回调参数	版本	
click	单击事件	(e:MouseEvent)=>void	-	1.5.0
Breadcrumb.Separator 1.5.0 #
参数	类型	默认值	版本
-	-	-	-
注意：在使用 Breadcrumb.Separator 时，其父组件的分隔符必须设置为 separator=""，否则会出现父组件默认的分隔符。
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		basePath: '/components/breadcrumb',
		routes: [
			{path: 'index',breadcrumbName: 'home',},
			{path: 'first',breadcrumbName: 'first',
				children: [
					{path: '/general',breadcrumbName: 'General',},
					{path: '/layout',breadcrumbName: 'Layout',},
					{path: '/navigation',breadcrumbName: 'Navigation',},
				],
			},
			{path: 'second',breadcrumbName: 'second',},
		],
		
		
	}
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	
}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
